import { BindLogic, useValues } from 'kea'
import { useState } from 'react'

import { LemonBanner } from '@posthog/lemon-ui'

import { TitledSnack } from 'lib/components/TitledSnack'
import { dayjs } from 'lib/dayjs'
import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
import { LemonSwitch } from 'lib/lemon-ui/LemonSwitch'
import { Link } from 'lib/lemon-ui/Link'

import { CollapsibleExceptionList } from './ExceptionList/CollapsibleExceptionList'
import { errorPropertiesLogic } from './errorPropertiesLogic'
import { ErrorEventId, ErrorEventProperties, ErrorEventType } from './types'
import { concatValues } from './utils'

export function idFrom(event: ErrorEventType): string {
    if ('uuid' in event && event.uuid) {
        return event.uuid
    }

    // Fallback to timestamp if uuid is not available
    if (event.timestamp) {
        return dayjs(event.timestamp).toISOString()
    }

    return 'error'
}

export function ErrorDisplay({
    eventProperties,
    eventId,
}: {
    eventProperties: ErrorEventProperties
    eventId: ErrorEventId
}): JSX.Element {
    return (
        <BindLogic logic={errorPropertiesLogic} props={{ properties: eventProperties, id: eventId }}>
            <ErrorDisplayContent />
        </BindLogic>
    )
}

export function ErrorDisplayContent(): JSX.Element {
    const { exceptionAttributes, hasStacktrace } = useValues(errorPropertiesLogic)
    const { sentryUrl, ingestionErrors, handled } = exceptionAttributes || {}
    const browserInfo = concatValues(exceptionAttributes, 'browser', 'browserVersion')
    const appInfo = concatValues(exceptionAttributes, 'appNamespace', 'appVersion')
    const [showAllFrames, setShowAllFrames] = useState(false)
    return (
        <div className="flex flex-col deprecated-space-y-2 pb-2">
            <div className="flex justify-between gap-2 items-center">
                <div className="flex flex-row gap-2 flex-wrap">
                    <TitledSnack
                        type="success"
                        title="captured by"
                        value={
                            sentryUrl ? (
                                <Link
                                    className="text-3000 hover:underline decoration-primary-alt cursor-pointer"
                                    to={sentryUrl}
                                    target="_blank"
                                >
                                    Sentry
                                </Link>
                            ) : (
                                'PostHog'
                            )
                        }
                    />
                    <TitledSnack title="handled" value={String(handled)} />
                    <TitledSnack
                        title="library"
                        value={concatValues(exceptionAttributes, 'lib', 'libVersion') ?? 'unknown'}
                    />
                    {browserInfo && <TitledSnack title="browser" value={browserInfo} />}
                    {appInfo && <TitledSnack title="app" value={appInfo} />}
                    <TitledSnack title="os" value={concatValues(exceptionAttributes, 'os', 'osVersion') ?? 'unknown'} />
                </div>
                <LemonSwitch
                    checked={showAllFrames}
                    label="Show entire stack trace"
                    onChange={() => setShowAllFrames(!showAllFrames)}
                />
            </div>

            {ingestionErrors || hasStacktrace ? <LemonDivider dashed={true} /> : null}
            {ingestionErrors && (
                <>
                    <LemonBanner type="error">
                        <ul>
                            {ingestionErrors.map((e, i) => (
                                <li key={i}>{e}</li>
                            ))}
                        </ul>
                    </LemonBanner>
                </>
            )}
            <CollapsibleExceptionList showAllFrames={showAllFrames} setShowAllFrames={setShowAllFrames} />
        </div>
    )
}
